<template>
  <el-dialog
    width="50%"
    :title="$t('capacityCode.printFilter')"
    :visible.sync="visible"
    :append-to-body="true"
    @close="close"
    v-loading="loading"
    :close-on-click-modal="false"
  >
    <ele-table-editor
      ref="table-editor"
      :isShowAdd="false"
      :isShowDelete="false"
      :columns="columns"
      v-model="printInfo.list"
    >
      <!-- 容量 -->
      <template v-slot:count="{ data }">{{ data.count }}</template>
      <!-- 已打印数量 -->
      <template v-slot:hasPrintNum="{ data }">{{ data.hasPrintNum }}</template>
      <!-- 未打印数量 -->
      <template v-slot:unPrintNum="{ data }">{{ data.unPrintNum }}</template>

      <!-- 打印数值 -->
      <template v-slot:amount="{ data }">
        <el-input-number
          v-model="data.amount"
          :precision="0"
          :min="0"
          :max="data.unPrintAmount"
        ></el-input-number>
      </template>
    </ele-table-editor>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">
        {{ $t("common.cancel") }}
      </el-button>
      <el-button type="primary" @click="goPrint">
        {{ $t("common.submit") }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import EleTableEditor from "ele-table-editor";
import { splitPrintList } from "@/api/print/mesCapacityCode";
export default {
  name: "PrintView",
  components: { EleTableEditor },
  props: {
    printInfo: {
      type: Object,
      default: () => {
        return { form: {}, list: [] };
      },
    },
  },

  data() {
    return {
      visible: false,
      loading: false,
      // 容量表格
      columns: [
        {
          // el-table-column 的属性
          type: "index",
        },
        {
          // el-table-column 的属性
          prop: "count",
          label: $i18n.t("mesCapacityCodePrinting.volume"), //"容量",
          // 支持 显示隐藏
          vif: true,
        },
        {
          prop: "hasPrintNum",
          label: $i18n.t("mesCapacityCodePrinting.hasPrintNum"), // "数量",
        },
        {
          prop: "unPrintNum",
          label: $i18n.t("mesCapacityCodePrinting.unPrintNum"), // "数量",
        },
        {
          prop: "amount",
          label: $i18n.t("mesCapacityCodePrinting.amount"), // "数量",
        },
      ],
    };
  },

  methods: {
    //点击打印按钮
    async goPrint() {
      const { form, list } = this.printInfo;
      const data = [];
      list.forEach((item, index) => {
        let idx = index + 1;
        if (!isFinite(item.amount)) {
          this.$message.error($i18n.t("capacityCode.msg2",{idx}));
          result = true;
        }
        data.push({
          orderCode: form.orderCode,
          prodCode: form.goodsCode,
          capacityType: form.printSort,
          codeStrategy: form.codeStrategy,
          productType: form.productType,
          amount: item.amount,
          count: item.count,
        });
      });

      const res = await splitPrintList(data);
      // 包装数据,存入缓存
      this.packageData(form, res.data.result || []);
      this.$emit("ok");
      this.$router.push("/splitPrint");
    },
    // 包装打印预备数据
    packageData({ barcodePrintTemp, barcodePrintTempCode }, list) {
      let obj = {
        barcodePrintTempCode: barcodePrintTempCode,
        printType: 0,
        barcodePrintTemp: barcodePrintTemp,
        barCodeResult: list,
      };
      console.log(obj);
      localStorage.splitPrint = JSON.stringify(obj);
    },
    close() {
      this.visible = false;
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped></style>
